<script setup>
  import { ref, onMounted } from 'vue'
  import PageHeader from "@/components/PageHeader.vue";
  import {getWalletApi} from "@/api/index.js";
  const pointsList = ref([])
  const points = ref(0)
  onMounted(() => {
    getWalletApi({type: 'integral'}).then(res => {
      points.value = res.total
      pointsList.value = res.data?.data
      console.log(res)
    })
  })
</script>

<template>
  <div class="wallet-page">
    <PageHeader/>
    <a-statistic title="我的积分" :value="points"/>
    <div class="points-list">
      <div class="points" v-for="item in pointsList" :key="item.id">
        <div class="num"> {{ item.num }} </div>
        <div class="name-time">
          <div class="title"> {{ item.info }} </div>
          <div class="time"> {{ item.create_time }} </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .wallet-page {
    padding: 30px 10px;
    .points-list {
      gap: 20px;
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      .points {
        gap: 30px;
        display: flex;
        align-items: center;
        padding: 20px 30px;
        border-radius: 10px;
        box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
        .name-time {
          flex: 1;
          gap: 30px;
          display: flex;
          .title {
            flex: 1;
          }
          .time {
            color: #999;
          }
        }
        .num {
          font-weight: bold;
        }
      }
    }
  }

  @media (max-width: 750px) {
    .name-time {
      text-align: right;
      display: block !important;
    }
  }
</style>